<template>
<!-- 商品热度分析8 41  -->
  <div id="hot_analyse">
    <template v-if="vipRootObj[8][41].owner">
      <radio_group01
        :radio_values="['7天', '15天', '30天']"
        v-model="value01"
        class="mt_30 mb_40"
      />
      <section class="s1">
        <div>
          <p class="title">
            <img src="@/assets/meng/hot_analyse04.png" /><span
              >热推达人趋势图</span
            >
          </p>
          <my_line
            :x_data="x_data01"
            :y1_data="y1_data01"
            name1="热推达人"
            formatter="1"
          />
        </div>
        <div>
          <p class="title">
            <img src="@/assets/meng/hot_video16.png" /><span
              >关联视频/直播趋势图</span
            >
          </p>
          <my_line
            :x_data="x_data02"
            :y1_data="y1_data02"
            :y2_data="y2_data02"
            name1="关联视频数"
            name2="关联直播数"
            formatter="1"
          />
        </div>
      </section>
      <section class="s2 mt_50">
        <p class="title">
          <img src="@/assets/meng/hot_analyse03.png" /><span
            >访客量/全网销量趋势图</span
          >
        </p>
        <my_line
          :x_data="x_data03"
          :y1_data="y1_data03"
          :y2_data="y2_data03"
          :y3_data="y3_data03"
          name1="访客量"
          name2="全网日销量"
          name3="转化率"
          formatter="4"
        />
      </section>
      <section class="s2 mt_50">
        <p class="title">
          <img src="@/assets/meng/video04_01.png" /><span
            >抖音浏览量/订单量趋势图</span
          >
        </p>
        <my_line
          :x_data="x_data04"
          :y1_data="y1_data04"
          :y2_data="y2_data04"
          :y3_data="y3_data04"
          name1="抖音浏览量"
          name2="抖音订单量"
          name3="转化率"
          formatter="3"
        />
      </section>

      <ul class="list_top">
        <li>
          <div>日期</div>
          <div>抖音订单量</div>
          <div>抖音浏览量</div>
          <div>转化率</div>
          <div>关联视频数</div>
          <div>关联直播数</div>
          <div>热推达人数</div>
        </li>
        <li v-if="list">
          <div>区间总计</div>
          <div>{{ list.sumData.volume }}</div>
          <div>{{ list.sumData.views }}</div>
          <div>{{ list.sumData.conversionRatio ? list.sumData.conversionRatio + '%' : '' }}</div>
          <div>{{ list.sumData.associatedVideo }}</div>
          <div>{{ list.sumData.associatedlive }}</div>
          <div>{{ list.sumData.associatedAuthor }}</div>
        </li>
      </ul>
      <ul class="list_bottom" v-if="list">
        <li v-for="(item, index) in list.list" :key="'list' + index">
          <div>{{ timestamp(item.timeUnix, "Y-M-D") }}</div>
          <div>{{ format_num(item.volume) }}</div>
          <div>{{ format_num(item.views) }}</div>
          <div>{{ item.conversionRatio }}%</div>
          <div>{{ format_num(item.associatedVideo) }}</div>
          <div>{{ format_num(item.associatedlive) }}</div>
          <div>{{ format_num(item.associatedAuthor) }}</div>
        </li>
      </ul>
    </template>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/hot_analyse.jpg'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="tik_tok" :lowestVipNum="vipRootObj[8][41].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "hot_analyse",
  components: {},
  data() {
    return {
      value01: "7天",
      x_data01: [],
      y1_data01: [],
      y2_data01: [],
      y3_data01: [],
      x_data02: [],
      y1_data02: [],
      y2_data02: [],
      x_data03: [],
      y1_data03: [],
      y2_data03: [],
      y3_data03: [],
      x_data04: [],
      y1_data04: [],
      y2_data04: [],
      y3_data04: [],
      list: null,
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  props: ["id"],
  computed: {},
  created() {
    if(this.vipRootObj[8][41].owner){
      this.get_data01();
      this.$watch("value01", function (newValue, oldValue) {
        this.get_data01();
      });
    }
  },
  methods: {
    get_data01() {
      let that = this;
      let startDate;
      let endDate;
      switch (this.value01) {
        case "7天":
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, "Y-M-D");
          break;
        case "15天":
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 15, "Y-M-D");
          break;
        case "30天":
          endDate = this.timestamp(Date.now() / 1000 - 86400 * 1, "Y-M-D");
          startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, "Y-M-D");
          break;
      }
      // 第一个
      this.$axios({
        method: "get",
        url: "/api/product/hotauthortrend",
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data01 = response.data.data[0].map((element) => {
              return this.timestamp(element, "Y年M月D日");
            });
            this.y1_data01 = response.data.data[1];
            this.y2_data01 = response.data.data[2];
            this.y3_data01 = response.data.data[3];
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // 第二个
      this.$axios({
        method: "get",
        url: "/api/product/videolivetrend",
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data02 = response.data.data[0].map((element) => {
              return this.timestamp(element, "Y年M月D日");
            });
            this.y1_data02 = response.data.data[1];
            this.y2_data02 = response.data.data[2];
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // 第三个
      this.$axios({
        method: "get",
        url: "/api/product/wholetrend",
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data03 = response.data.data[0].map((element) => {
              return this.timestamp(element, "Y年M月D日");
            });
            this.y1_data03 = response.data.data[1];
            this.y2_data03 = response.data.data[2];
            this.y3_data03 = response.data.data[3];
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // 第四个
      this.$axios({
        method: "get",
        url: "/api/product/douyintrend",
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.x_data04 = response.data.data[0].map((element) => {
              return this.timestamp(element, "Y年M月D日");
            });
            this.y1_data04 = response.data.data[1];
            this.y2_data04 = response.data.data[2];
            this.y3_data04 = response.data.data[3];
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // 第五个
      this.$axios({
        method: "get",
        url: "/api/product/douyinprolist",
        params: {
          proId: that.id,
          startDate: startDate,
          endDate: endDate,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.list = response.data.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped lang='less'>
.list_bottom {
  font-family: DINAlternate-Bold;
  padding-left: 30px;
  padding-right: 10px;
  height: 340px;
  overflow-y: scroll;
  li {
    font-size: 14px;
    height: 48px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    div {
      width: 100%;
      text-align: center;
    }
  }
}
.list_top {
  padding-right: 20px;
  padding-left: 30px;
  margin-top: 50px;
  box-sizing: border-box;
  li {
    font-size: 14px;
    height: 48px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      width: 100%;
      text-align: center;
    }
  }
  li:first-child {
    background-color: #f5f9ff;
  }
  li:last-child {
    padding-top: 2px;
    font-family: DINAlternate-Bold;
    color: #fd7f2c;
    background-color: #fff4ed;
  }
}
.s1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  > div {
    #line {
      height: 280px !important;
    }
    width: 49%;
  }
}
#line {
  height: 420px;
  width: 100%;
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
#hot_analyse {
  padding-bottom: 50px;
}
</style>